<template>
	<s-layout title="订单详情" navbar="inner" :bgStyle="{
	  color:'#F6F6F6',
	  src: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/order-background.png'
	}" color='#fff'>
		<view class="order-status ss-flex ss-p-x-34 justify-between align-center ss-p-t-20">
			<view class="status">待付款</view>
			<view class="describe">剩余 30:00</view>
		</view>
		<view class="order-goods ss-p-30">
			<view class="store ss-flex justify-start align-center">
				<view class="store-left ss-flex align-end">
					<view class="ss-flex align-center">
						<image class="store-logo" src="" mode=""></image>
						<view class="store-name ss-m-x-10">宠物店生活馆</view>
					</view>
					<uni-icons type="right" size="16" color="#494949"></uni-icons>
				</view>
			</view>
			<view class="goods ss-flex ss-m-t-30">
				<image class="goods-logo ss-m-r-20" src="" mode=""></image>
				<view class="goods-details">
					<view class="details-t ss-flex justify-between align-center">
						<view>剪指甲</view>
						<view style="font-size: 24rpx;color: #797979;">￥16</view>
					</view>
					<view class="details-c ss-flex justify-between align-center ss-m-t-5">
						<view class="num">随时退·过期退</view>
						<view class="num">x1</view>
					</view>
					<view class="go-info ss-flex justify-end align-center ss-m-t-10">
						<view class="go-text" style="color: #2A2A2A;">实付 ￥16</view>
						<uni-icons type="right" size="16" color="#B2B2B2"></uni-icons>
					</view>
				</view>
			</view>
			<view class="qrcode ss-p-t-32 ss-p-b-30 ss-m-t-26">
				<image class="qrcode-image"></image>
				<view class="check-code ss-flex justify-between align-start ss-m-t-30">
					<view class="check-code-left">
						<view class="title">待使用 <text> 2025-01-13 23:59:59到期</text></view>
						<view class="code ss-m-t-16">4427 1618 01</view>
						<view class="code ss-m-t-16">4427 1618 02</view>
					</view>
					<view class="check-code-right">申请退款</view>
				</view>
			</view>
			<view class="refund ss-flex justify-between align-center ss-p-t-30">
				<view class="refund-left ss-flex">
					<view class="refund-left-item ss-m-r-30">已使用（1）</view>
					<view class="refund-left-item">已退款（1）</view>
				</view>
				<view class="refund-right">
					<view class="go-info ss-flex justify-end align-center">
						<view class="go-text" style="color: #B2B2B2;">查看详情</view>
						<uni-icons type="right" size="16" color="#B2B2B2"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="notice ss-p-30">
			<view class="notice-title ss-flex justify-between align-center">
				<view class="title">使用须知</view>
				<view class="go-info ss-flex justify-end align-center">
					<view class="go-text" style="color: #B2B2B2;">查看全部</view>
					<uni-icons  type="right" size="16" color="#B2B2B2"></uni-icons>
				</view>
			</view>
			<view class="notice-content ss-m-t-30">为了保障您的权益，消费前请不要将券号提供给商户</view>
		</view>
		
		<view class="order-details ss-p-30">
			<view class="order-details-title ss-m-b-30">订单信息</view>
			<view class="order-details-item ss-m-b-20">手机号码：176****1750</view>
			<view class="order-details-item ss-m-b-20 ss-flex justify-start align-center">
				<view>订单编号：3839393939393993</view>
				<view class="order-details-btn ss-m-l-10">复制</view>
			</view>
			<view class="order-details-item">下单时间：2024-10-15 13:38:47</view>
		</view>
		
		<!-- 防止底部紧贴 勿删 -->
		<view style="width: 1rpx;height: 400rpx;"></view>
		
		<view class="bottom-box ss-safe-bottom">
			<view class="ss-p-y-20">
				<view class="pay-btn">立即支付</view>
			</view>
		</view>
		
		<!-- 价格明细 -->
		<priceDetails></priceDetails>
		<!-- 退款/使用记录 -->
		<!-- <refundList></refundList> -->
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import priceDetails from './components/price-details.vue'
	// import refundList from './components/refund-list.vue'
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.order-status {
		width: 100%;

		.status {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.describe {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	
	.order-goods {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx auto 0;
		
		.store {
			.store-logo {
				width: 32rpx;
				height: 32rpx;
				background: #D8D8D8;
				border-radius: 8rpx;
			}
			
			.store-name {
				font-weight: 500;
				font-size: 32rpx;
				color: #343434;
			}
		}
		
		.goods {
			.goods-logo {
				width: 120rpx;
				height: 120rpx;
				background: #E6E6E6;
				border-radius: 10rpx;
			}
			.goods-details {
				flex: 1;
				height: 120rpx;
				
				.details-t {
					font-weight: 500;
					font-size: 28rpx;
					color: #2A2A2A;
				}
				
				.details-c {
					.num {
						font-weight: 400;
						font-size: 24rpx;
						color: #9A9A9A;
						text-align: right;
					}
				}
			}
		}
		
		.qrcode {
			border-top: 1rpx dashed #E3E3E3;
			
			.qrcode-image {
				width: 254rpx;
				height: 254rpx;
				background-color: #E6E6E6;
				margin: 0 auto;
			}
			
			.check-code {
				
				.check-code-left {
					.title {
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
						
						text {
							font-size: 22rpx;
							color: #787878;
						}
					}
					
					.code {
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
					}
				}
				
				.check-code-right {
					width: 140rpx;
					height: 52rpx;
					border-radius: 26rpx;
					border: 2rpx solid #E4E4E4;
					font-weight: 400;
					font-size: 24rpx;
					color: #5C5C5C;
					line-height: 52rpx;
					text-align: center;
				}
			}
		}
		
		.refund {
			border-top: 1rpx dashed #E3E3E3;
			
			.refund-left {
				.refund-left-item {
					font-weight: 400;
					font-size: 24rpx;
					color: #282828;
				}
			}
		}
	}
	
	
	.notice {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto 0;
		
		.notice-title {
			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #474747;
			}
		}
		
		.notice-content {
			font-weight: 400;
			font-size: 24rpx;
			color: #6C6C6C;
		}
	}
	
	.order-details {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto 0;
		
		.order-details-title {
			font-weight: 500;
			font-size: 28rpx;
			color: #474747;
		}
		
		.order-details-item {
			font-weight: 400;
			font-size: 24rpx;
			color: #6C6C6C;
			
			.order-details-btn {
				width: 56rpx;
				height: 24rpx;
				border-radius: 6rpx;
				border: 1rpx solid #D1D1D1;
				font-weight: 400;
				font-size: 18rpx;
				color: #6C6C6C;
				line-height: 22rpx;
				text-align: center;
			}
		}
	}
	
	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		background-color: #fff;
		
		.pay-btn {
			width: 702rpx;
			height: 80rpx;
			background: #35C7A8;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
	
	.go-info {
		.go-text {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #2A2A2A;
		}
	}
</style>